<header>
    如何与物体交互？
</header>
<h2>
    场景说明
</h2>
<p>
    如下，我们绘制两个三角形，一个红色的一个蓝色的（你可以用鼠标旋转或者别的操作一下界面）：
</p>
<example tag="course/webgl_6" height="340px"></example>
<p>
    现在，我们希望点击画布的时候，知道自己点击的是红色的三角形还是蓝色的三角形，或者是空白区域。怎么办？
</p>
<h2>
    实现
</h2>
<h3>
    定义区域
</h3>
<p>
    在我们使用
    <span class="special">painter.render()</span>
    方法的时候，传递的参数其中有一个配置项region，如果你希望绘制的区域被标记，给个非空字符串即可，这里大体就是：
</p>
<pre tag="javascript">
painter.render([{
    region: "红色三角形",
    ......
}])

painter.render([{
    region: "蓝色三角形",
    ......
}])
</pre>
<p>
    此时，两次绘制的图形就分别被记录起来了。
</p>
<h3>
    获取区域
</h3>
<p>
    非常简单，比如我们定义一个点击事件，然后每次点击的时候调用画笔的
    <span class="special">painter.getRegion()</span>
    即可：
</p>
<pre tag="javascript">
el.addEventListener("click", event => {
    painter.getRegion(event.offsetX, event.offsetY).then(data => {
        alert("点击的区域：" + data);
    });
});
</pre>
<p>
    下面是完整的例子代码：
</p>
<example tag="course/webgl_7" height="340px"></example>